<template>
	<view class="count">

		<view class="bg1"></view>
		<!-- 结算明细 -->
		<view class="bg2 flex_around">
			<view class="flex_column bg2_left">
				<text style="font-size: 38rpx;">{{sum1||'0.00'}}元</text>
				<text style="margin-top: 20rpx;margin-bottom: 10rpx;">待结算金额</text>
				<text style="font-size: 24rpx;">已确认的订单中未打款金额</text>
			</view>
			<view class="flex_column bg2_right">
				<text style="font-size: 38rpx;">{{sum2||'0.00'}}元</text>
				<text style="margin-top: 20rpx;margin-bottom: 10rpx;">已结算金额</text>
				<text style="font-size: 24rpx;">已打款</text>
			</view>
		</view>
		<view
			style="margin-top: 300rpx; margin-bottom: 20rpx; font-size: 32rpx;font-weight: bold;display: flex;justify-content: space-between;align-items: center;">
			<text>收入明细</text>
			<text style="font-size: 28rpx;text-decoration: underline;color: #007b46;"
				@click="billShowhide=true">对账单下载></text>
		</view>
		<!-- 对账单下载的弹框------- -->
		<view class="billBox" v-if="billShowhide">
			<view class="model">
				<view class="billTitle">
					您可以按照订单创建时间，下载订单维度的对账单，请选择<text style="color: #007b46;">订单创建时间</text>范围:
				</view>
				<view class="timeBox">
					<!-- 日期范围 -->
					<uni-datetime-picker v-model="billRange" type="daterange" @change="billChange" />
				</view>
				<view style="width: 100%; display: flex;justify-content: space-between;">
					<button type="info" size="mini" style="width: 25%;" @click="billCancel">取消</button>
					<button type="primary" size="mini" style="width: 50%;background-color: #007b46;"
						@click="billConfirm">下载
					</button>
				</view>
				<view style="font-size: 24rpx;color: #999;margin-top: 20rpx;">
					*文件格式为Excel，建议使用电脑下载，用手机下载体验较差*
				</view>
			</view>
		</view>

		<!-- 根据时间范围搜索-->
		<!-- 	<view class="searchOrTime1" @click="pickerVisable=true">
			<view class="searchInputBox1">
				<view class="inptBox">
					<input v-model="timeInputValue" disabled="true" class="searchInput1" placeholder="请选择开工时间范围"
						placeholder-style="font-size:24rpx;" suffixIcon="camera-filled" />
				</view>

				<view v-if="timeInputValue" class="searchBtn1 flex_center" @click.stop="closeTimeValue">
					<uni-icons type="closeempty" size="20"></uni-icons>
				</view>
			</view>
			<view class="timeSelect flex_center">
				<text>开工时间筛选</text>
				<image src="/static/images/screenTime.png" mode=""></image>
			</view>
		</view> -->
		<!-- 时间范围选择组件 -->
		<!-- 	<term-picker :visable.sync="pickerVisable" :minYear="2020" :deferYear="30" themeColor="#007B46"
			@confirm="TimeConfirm">
		</term-picker> -->


		<!-- 根据工地地址/订单编号搜索 -->
		<view class="searchOrTime ">
			<view class="searchInputBox">

				<view class="inptBox">
					<input v-model="buildingInputValue" class="searchInput" placeholder="搜索工地地址/订单编号"
						placeholder-style="font-size:24rpx;" confirm-type="search" suffixIcon="camera-filled"
						@confirm="searchBtn" />
				</view>

				<view v-if="buildingInputValue" class="closeIcon flex_center" @click.prevent="closeBuildingValue">
					<uni-icons type="closeempty" size="20"></uni-icons>
				</view>

				<view class="searchBtn" @click.stop="searchBtn">
					<text>搜索</text>
				</view>
				<view class="screenStyle flex_center" @click="scrrenOpen">
					<image style="width: 30px;" src="/static/images/screenTime.png" mode=""></image>
					<text style="font-size: 12px;">筛选</text>
				</view>

			</view>
		</view>
		<!-- 列表 -->
		<scroll-view class="sh" scroll-y="true" :refresher-enabled="true" :refresher-triggered="refresher"
			:refresher-threshold="100" refresher-background="#258258" @refresherrefresh="onRefresh"
			@scrolltolower="onscrolltolower">
			<view v-for="(item,index ) in countList" :key="index">
				<view class="orderCard">
					<view class="lineHeight" style="font-size:30rpx; font-weight: bold;">
						<text>{{item.addres||''}}</text>
					</view>
					<view style="margin: 10rpx 0;">
						<uni-tag :inverted="true" :text="item.types==1? '方案预付款':'完结款'"
							:type="item.types==1?'warning':'success'" />
						<uni-tag :inverted="true" :text="item.state==1? '未到节点':item.state==2?'待打款':'已打款'"
							:type="item.state==1?'error':item.state==2?'warning':'success'"
							style="margin-left: 15rpx;" />
					</view>
					<view class="lineHeight cardItemtwo">
						<view class="">
							<text style="color:#666;font-size: 28rpx;margin-right: 20rpx;">金额:</text><text
								style="color: #007B46;font-size: 28rpx;font-weight: bold;">{{item.money||'0.00'}}元</text>
						</view>
						<view class="torder" @click.stop="SameOrder(item)">
							同单搜索
						</view>
					</view>

					<view style="color:#666;font-size: 28rpx;" class="lineHeight">
						方案确认时间：{{item.agency_confirm_time?timestampToTime_S(item.agency_confirm_time):'--'}}
					</view>
					<view style="color:#666;font-size: 28rpx;" class="lineHeight">
						打款完成时间：{{item.cleared_time?timestampToTime_S(item.cleared_time):'--'}}
					</view>
				</view>

			</view>
			<view v-if="countList.length>0&&isLoadMore" class="flex_center" style="color: #666;">没有更多了~
			</view>
			<!-- 列表暂无数据占位图 -->
			<view style="display: flex;flex-direction: column;align-items: center;" v-if="countList.length==0">
				<image src="@/static/images/noDatalist.png" mode=""
					style="margin: 30rpx 0;width: 400rpx;height: 400rpx;"></image>
				<view style="color: #999;">
					暂无数据
				</view>
			</view>
		</scroll-view>



		<!-- 自定义筛选组件 -->
		<my-scrren ref="MyScrrenRef" :showHideen="scrrenShowHideen" @func="func" @screenChild="screenChild"></my-scrren>
	</view>
</template>

<script setup>
	// import termPicker from '@/components/term-picker/term-picker.vue'
	import myScrren from '@/components/my-scrren/my-scrren.vue'

	import {
		onHide,
		onLaunch,
		onLoad,
		onShow,
	} from '@dcloudio/uni-app';

	import {
		ref
	} from 'vue';
	import {
		timestampToTime_M,
		timestampToTime_D,
		timestampToTime_S
	} from "@/utils/date.js"; // 引入工具函数时间格式转化
	import {
		SCM_scm_money,
		SCM_scm_export_money
	} from '@/api/api.js' //引入api接口

	onLoad(() => {
		userInfo.value = uni.getStorageSync('userInfo') && JSON.parse(uni.getStorageSync('userInfo'))
		// #ifdef MP-WEIXIN
		// 开启小程序原生右上角分享按钮
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline'] //开启转发好友和转发朋友圈按钮
		});
		// #endif
	})
	onShow(() => {
		countList.value = []
		currentPage.value = 1
		buildingInputValue.value = ''
		// timeInputValue.value = ''
		// startTime.value = 0
		// endTime.value = 0
		getcountList() //获取统计数据  
	})

	// 筛选
	const scrrenShowHideen = ref(false) //控制显示子组件的值
	const MyScrrenRef = ref() //子组件实例 可以访问子组件方法 需要在子组件主动暴露defineExpose（{}）


	// const pickerVisable = ref(false) //隐藏显示日期选择
	const buildingInputValue = ref('') //搜索工地地址 多订单
	// const timeInputValue = ref('') //搜索时间范围

	const currentPage = ref(1) //条数
	const currentSize = ref(5) //页码
	const isLoadMore = ref(false) //是否加载中

	const startTime = ref(0) //开始时间
	const endTime = ref(0) //结束时间
	const screenState = ref(0) // 状态
	const screenType = ref(0) //类型

	const userInfo = ref({}) //用户信息
	const refresher = ref(false) //当前下拉刷新状态


	const sum1 = ref('')
	const sum2 = ref('')
	const countList = ref([])

	const billShowhide = ref(false) //账单下载弹框显示隐藏
	const billRange = ref([]) //选择的时间范围
	const billStartTime = ref(0) //开始时间
	const billEndTime = ref(0) //结束时间
	const billxlsl = ref('') //excel 表格链接

	// 账单时间确认
	const billChange = ((e) => {
		// 处理时间
		billRange.value?.forEach((itemTime, index) => {
			if (index == 0) {
				billStartTime.value = new Date(new Date(itemTime).toLocaleDateString()).getTime() / 1000
			}
			if (index == 1) {
				billEndTime.value = new Date(new Date(itemTime).toLocaleDateString()).getTime() / 1000 +
					86399
			}
			if (billStartTime.value && billEndTime.value) {
				// 请求表格筛选数据
				billExporMoney()
			}

		})
	})
	const billExporMoney = async () => {
		let params = {
			start_time: billStartTime.value,
			end_time: billEndTime.value,
			agency_id: userInfo.value.agency_id + '', //供应商id
		}
		const res = await SCM_scm_export_money(params)
		if (res && res.code == 0) {
			billxlsl.value = res.data.url
		}
	}

	// 账单时间取消
	const billCancel = () => {
		billRange.value = []
		billxlsl.value = ''
		billStartTime.value = 0
		billEndTime.value = 0
		billShowhide.value = false
	}
	// 账单时间下载
	const billConfirm = () => {
		if (billStartTime.value && billEndTime.value) {
			// 下载文件
			// #ifdef H5
			window.open(billxlsl.value, '_blank');
			// #endif

			// #ifdef MP-WEIXIN
			uni.downloadFile({
				url: billxlsl.value,
				success: function(res) {
					wx.getFileSystemManager().saveFile({
						tempFilePath: res.tempFilePath,
						success: function(res) {
							// 保存的临时路径
							var filePath = res.savedFilePath;
							uni.openDocument({
								// 直接打开
								filePath: filePath, // 这里填上面写入本地的文件路径
								fileType: 'xlsx',
								showMenu: true, // 右上角是否有可以转发分享的功能，配不配随意
								success: (res) => {
									console.log('打开文档成功')
								}
							})
						}
					});
				}
			});
			// #endif
			billRange.value = []
			billxlsl.value = ''
			billStartTime.value = 0
			billEndTime.value = 0
			billShowhide.value = false
		} else {
			uni.showToast({
				title: '请选择时间后下载',
				icon: 'error'
			})
		}
	}
	// 获取统计数据
	const getcountList = async () => {
		let params = {
			no_or_addrs: buildingInputValue.value, //订单编号或订单地址
			agency_id: userInfo.value.agency_id, //供应商id
			start_time: startTime.value, //开工时间-开始
			end_time: endTime.value, //开工时间-结尾
			state: screenState.value, //状态	
			types: screenType.value, //类型
			page_size: currentSize.value,
			page_no: currentPage.value,
		}
		const res = await SCM_scm_money(params)
		console.log('获取统计数据res', res);
		if (res && res.code == 0) {
			countList.value = countList.value.concat(res.data.list)
			//判断接口返回数据量小于请求数据量，则表示此为最后一页
			if (res.data.list.length < currentSize.value) {
				isLoadMore.value = true //是否加载中
			} else {
				isLoadMore.value = false
			}
			res.data.money_sum.forEach(item => {
				if (item.types == 1) {
					sum2.value = item.money
				}
				if (item.types == 2) {
					sum1.value = item.money
				}
			})
		} else {
			isLoadMore.value = true //是否加载中
		}
	}
	// 打开筛选下拉
	const scrrenOpen = () => {
		scrrenShowHideen.value = true
	}
	// 子组件传递的方法-----------------
	// 关闭mask
	const func = (e) => {
		console.log('子组件传递的值', e);
		scrrenShowHideen.value = false
	}
	// 筛选参数
	const screenChild = (obj) => {
		console.log('子组件传的筛选参数', obj.start_time);
		startTime.value = obj.start_time
		endTime.value = obj.end_time
		screenState.value = obj.state
		screenType.value = obj.types

		scrrenShowHideen.value = false
		countList.value = []
		currentPage.value = 1

		getcountList() //获取统计数据 
	}
	// 工地地址和键盘 搜索按钮
	const searchBtn = () => {
		countList.value = []
		currentPage.value = 1
		getcountList() //获取统计数据  
	}
	// 同单搜索
	const SameOrder = (item) => {
		buildingInputValue.value = item.aosid.toString()
	}

	// 工地搜索点击清空按钮
	const closeBuildingValue = () => {
		countList.value = []
		currentPage.value = 1
		buildingInputValue.value = ''
		getcountList() //获取统计数据  
	}

	// //时间搜索点击清空按钮
	// const closeTimeValue = () => {
	// 	countList.value = []
	// 	currentPage.value = 1
	// 	timeInputValue.value = ''
	// 	startTime.value = 0
	// 	endTime.value = 0
	// 	getcountList() //获取统计数据  
	// }
	// // 点击时间选择 确定按钮，返回当前选择的值
	// const TimeConfirm = (date) => {
	// 	timeInputValue.value = date.join('一')
	// 	date && date.forEach((itemTime, index) => {
	// 		if (index == 0) {
	// 			startTime.value = new Date(new Date(itemTime).toLocaleDateString()).getTime() / 1000
	// 			console.log('开始时间', startTime.value);
	// 		}
	// 		if (index == 1) {
	// 			endTime.value = new Date(new Date(itemTime).toLocaleDateString()).getTime() / 1000 + 86399
	// 			console.log('结束时间', endTime.value);
	// 		}
	// 	})
	// 	pickerVisable.value = false
	// }

	// 自定义下拉刷新被触发
	const onRefresh = () => {
		console.log('自定义下拉刷新被触发', );
		refresher.value = true
		setTimeout(() => {
			countList.value = []
			currentPage.value = 1
			buildingInputValue.value = ''
			// timeInputValue.value = ''
			// startTime.value = 0
			// endTime.value = 0
			getcountList() //获取统计数据  
			refresher.value = false
		}, 2000)
	}

	// 滚动到底部 上拉加载更多
	const onscrolltolower = () => {
		console.log("滚动到底部 上拉加载更多");
		if (!isLoadMore.value) { //此处进行判断上锁，防止重复请求
			isLoadMore.value = true
			currentPage.value += 1 //页数加1
			getcountList() //获取统计数据  
		}
	}
</script>

<style lang="scss">
	// 禁止出现滚动条
	uni-page-body,
	html,
	body {
		height: 100%;
		box-sizing: border-box;
	}

	.count {
		width: 100vw;
		position: relative;
		padding: 0 30rpx;

		.sh {
			overflow-y: auto;
			height: 58vh; // 这是主要
			flex-grow: 1;
		}

		.bg1 {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 200rpx;
			background: #FFF;
			box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(0, 0, 0, 0.15);
			border-bottom-left-radius: 100rpx;
			border-bottom-right-radius: 100rpx;
		}

		.bg2 {
			position: absolute;
			top: 50rpx;
			left: 50%;
			transform: translate(-50%);
			width: 90%;
			height: 200rpx;
			border-radius: 40rpx;
			background: #007B46;

			.bg2_left,
			.bg2_right {
				font-size: 28rpx;
				color: #FFF;
			}
		}

		.searchOrTime {
			display: flex;
			justify-content: space-between;

			.searchInputBox {
				display: flex;
				width: 100%;
				height: 65rpx;
				position: relative;

				.inptBox {
					width: 100%;
					background: #FFFFFF;
					box-shadow: 0px 4rpx 8rpx 0px rgba(221, 221, 221, 0.5000);
					border-radius: 32rpx 0 0 32rpx;
					padding-left: 30rpx;

					.searchInput {
						width: 88%;
						height: 65rpx;
						font-size: 28rpx;
					}
				}


				.closeIcon {
					width: 10%;
					height: 65rpx;
					position: absolute;
					z-index: 9;
					top: 0;
					right: 22%;
				}

				.searchBtn {
					width: 15%;
					height: 65rpx;
					background: #007B46;
					border-radius: 0 32rpx 32rpx 0;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-weight: 500;
					color: #fff;
				}

				.screenStyle {
					width: 18%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.searchOrTime1 {
			margin: 10rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.searchInputBox1 {
				width: 65%;
				display: flex;
				height: 65rpx;
				position: relative;

				.inptBox {
					width: 100%;
					background: #FFFFFF;
					box-shadow: 0px 4rpx 8rpx 0px rgba(221, 221, 221, 0.5000);
					border-radius: 30rpx;
					padding-left: 30rpx;

					.searchInput1 {
						height: 65rpx;
						font-size: 28rpx;

					}
				}



				.searchBtn1 {
					width: 15%;
					height: 65rpx;
					position: absolute;
					z-index: 9;
					top: 0;
					right: 0;
				}

			}

			.timeSelect {
				display: flex;
				height: 40rpx;

				text {
					font-size: 24rpx;
					font-weight: 500;
					color: #007B46;
					line-height: 34rpx;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

		}

		// 滚动条
		.lineHeight {
			line-height: 50rpx;
		}

		.orderCard {
			margin: 20rpx 0;
			padding: 15rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(0, 0, 0, 0.08);

			.cardItemtwo {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.torder {
					box-shadow: inset 0rpx 1rpx 4rpx 0rpx rgba(0, 0, 0, 0.17);
					border-radius: 60rpx;
					border: 1rpx solid #007B46;
					font-size: 26rpx;
					color: #007B46;
					line-height: 50rpx;
					padding: 0rpx 10rpx;
				}
			}
		}

		// 账单下载容器
		.billBox {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			z-index: 101;
			backdrop-filter: blur(20rpx);
			display: flex;
			justify-content: center;
			align-items: center;

			.model {
				width: 80%;
				padding: 30rpx;
				display: flex;
				border-radius: 20rpx;
				box-shadow: #aaa 0 0 20rpx;
				background-color: #FFF;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				.timeBox {
					width: 100%;
					margin: 60rpx 0;
				}
			}
		}
	}
</style>